<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地址列表</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/iconfont.css">
    <script src="../../lib/jquery/jquery-3.6.0.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../../javaScript/wuliuguanli/dizhiliebiao.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #F2F2F2;
        }

        .container {
            width: 1670px;
            background-color: white;
        }

        .container>div:nth-child(1) {
            margin-top: 20px;
        }

        .row {
            padding-left: 20px;
            margin-top: 20px;
        }

        .icon-shujukuliebiao {
            height: 50px;
            line-height: 50px;
        }

        button {
            width: 60px;
            height: 50px;
            line-height: 50px;
            background-color: #0099FF;
            border: white;
        }

        .btn {
            width: 100px;
            color: #0099FF;
            background-color: white;
            outline: #0099FF solid 1px;
        }

        .kaiguan {
            /* text-align: left; */
            position: relative;
        }

        .icon-anniu_kaiqi {
            font-size: 40px;
            color: #49A2E8;
            position: absolute;
            top: -5px;
            left: 5px;
            /* display: none; */
        }

        .icon-anniu_guanbi {
            font-size: 40px;
            position: absolute;
            top: -5px;
            left: 5px;
            display: none;
            /* cursor: pointer; */
        }

        .shanchu {
            cursor: pointer;
        }

        .modal-footer {
            border: none;
            /* text-align: center;
           font-size: 18px; */
            /* display: block; */
        }

        #myModalLabel {
            text-align: center;
            height: 50px;
            line-height: 50px;
        }

        .modal-title {
            margin-top: 30px;
        }

        .modal-header {
            border: none;
        }

        .page_num>ul {
            overflow: hidden;
            height: 25px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-1 col-xs-1">
                <span class="iconfont icon-shujukuliebiao">数据列表</span>
            </div>
            <!-- <button class="col-md-1 col-xs-1">
                <span class="iconfont icon-shanchu ck">删除</span>
            </button> -->
            <!-- 删除按钮 -->
            <button type="button" class="btn btn-primary btn-lg col-md-1 col-xs-1" data-toggle="modal"
                data-target="#myModal">
                <span class="iconfont icon-shanchu ck"></span>删除
            </button>
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">确定要删除“XXXXX”？</h4>
                        </div>
                        <div class="modal-body">

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary shanchu">确定</button>
                        </div>
                    </div>
                </div>
            </div>

            <button class="col-md-1 col-xs-1 col-md-offset-9 col-xs-offset-9 btn">
                <a href="../wuliuganli/xinzengdizhi.html"><span class="iconfont icon-x">新增</span></a>
            </button>
        </div>
        <div class="row">
            <div class="col-md-12 col-xs-12">
                <table class="table">
                    <thead id="Thead">
                        <tr>
                            <th> <input type="checkbox" class="quanxuan"></th>
                            <th>序号</th>
                            <th>地址简称</th>
                            <th>发货人</th>
                            <th>手机号</th>
                            <th>发货地址</th>
                            <th>设为发货点</th>
                            <th>设为收货点</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="Tbody">

                    </tbody>
                </table>
            </div>
            <div class="col-md-12 col-xs-12">
                <div class="col-md-8 col-xs-8"> <input type="checkbox" class="quanxuan" value="">&nbsp&nbsp全选</div>
                <nav aria-label="Page navigation" class="col-md-3 col-xs-3 page_nav">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="col-md-1 col-xs-1 page_num">
                    <ul>
                        <li data-num="10" class="page_data">10条/页<span class="iconfont icon-arrow-down"></span></li>
                        <li data-num="15" class="page_data">15条/页</li>
                        <li data-num="20" class="page_data">20条/页</li>
                        <li data-num="25" class="page_data">25条/页</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        let pagingData = dizhiarr
        function showTable(data) {
            $('#Tbody').html('')
            $('#motaikuang').html('')
            console.log(data)
            console.log($('#motaikuang'))
            for (let i = 0; i < data.length; i++) {
                $('#Tbody').append(`
                <tr>
                    <td><input type="checkbox"  id="num${data[i].xuhhao}"></td>
                    <td>${data[i].xuhhao}</td>
                    <td>${data[i].jiancheng}</td>
                    <td>${data[i].name}</td>
                    <td>${data[i].dianhua}</td>
                    <td>${data[i].dizhi}</td>
                    <td class="kaiguan">
                        <span class="iconfont icon-anniu_kaiqi"></span>
                        <span class="iconfont icon-anniu_guanbi"></span>
                    </td>
                    <td class="kaiguan">
                        <span class="iconfont icon-anniu_kaiqi"></span>
                    <span class="iconfont icon-anniu_guanbi"></span>
                    </td>
                    <td>
                        <span class="shanchu_table" type="button" data-toggle="modal" data-target="#shanchu_table${data[i].name}">删除</span>
                        <span class="xiugai">修改</span>
                    </td>
                </tr>
                `)
// <span class="shanchu_table" type="button" data-toggle="modal" data-target="#shanchu_table${data[i].name}">删除</span>
    //                     <div class="modal fade" tabindex="-1" role="dialog" id="shanchu_table${data[i].name}">
    //     <div class="modal-dialog" role="document">
    //         <div class="modal-content">
    //             <div class="modal-header">
    //                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    //                 <h4 class="modal-title">是否要确认删除${data[i].name}的数据</h4>
    //             </div>
    //             <div class="modal-footer">
    //                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
    //                 <button type="button" class="btn btn-primary">确定</button>
    //             </div>
    //         </div>
    //     </div>
    // </div>

                //             $('#motaikuang').append(`  
                //     <div class="modal fade" tabindex="-1" role="dialog" id="shanchu_table${data[i].xuhhao}">
                //     <div class="modal-dialog" role="document">
                //         <div class="modal-content">
                //             <div class="modal-header">
                //                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                //                 <h4 class="modal-title">是否要确认删除${data[i].xuhhao}的数据</h4>
                //             </div>
                //             <div class="modal-footer">
                //                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                //                 <button type="button" class="btn btn-primary">确定</button>
                //             </div>
                //         </div>
                //     </div>
                // </div>
                // `)
            }
        }
        let del_table
        $('#Tbody').on('click', '.shanchu_table', function () { //删除
            del_table = $(this)
        })
        $('.shanchu_table').on('click', '.btn-primary', function () {
            let idNum = parseInt(del_table.parent().siblings().eq(1).text())
            del_table.parent().parent().remove()
            pagingData.splice(idNum - 1, 1)
            paging(num, pagingData)
            showPage(pagingData)
            $('.fade').css({ display: 'none' })
            $(this).parent().parent().parent().parent().remove()
        })
        // showTable(dizhiarr)
        let num = 1 //初始页
        let lengthPage //最大页数
        // 渲染页数
        let disPage = 10
        $('.page_data').click(function () {
            disPage = parseInt($(this).attr('data-num'))
            paging(num, pagingData, disPage)
        })
        function showPage(data, disPage) {
            $('.pagination').html(`    <li class="prePage">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                  
                    <li class="nextPage">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>`) //每次渲染前刷新一下渲染的内容
            lengthPage = Math.ceil(data.length / disPage) //lengthPage是最大页数
            // if (lengthPage <= 4) {
            //     for (let i = 1; i <= lengthPage; i++) {
            //         $('.pagination li:last-of-type').before(`
            //     <li class="new_page active"><a href="#">${i}</a></li>
            //                 `)
            //     }

            // } else if (lengthPage > 4) {
            //     for (let i = 1; i <= lengthPage; i++) {
            // $('.pagination li:last-of-type').before(`
            //         <li class="new_page"><a href="#">${i}</a></li>
            //         `)
            // }
            for (let i = 1; i <= lengthPage; i++) {
                let pageCont = $('.pagination li:last-of-type').before(`
            <li class="new_page"><a href="#">${i}</a></li>
            `)
                if (lengthPage <= 5) {
                    pageCont
                } else if (lengthPage > 5) {
                    if (num <= 2) {
                        pageCont
                        $('.new_page').eq(num + 2).children().text(`...`)
                        $('.new_page').slice(num + 3, lengthPage - 1).css({
                            display: 'none'
                        })
                    } else if (num > 2 && num < 4) {
                        $('.new_page').eq(num + 1).children().text(`...`)
                        $('.new_page').slice(num + 2, lengthPage - 1).css({
                            display: 'none'
                        })
                    } else if (num >= 4) {
                        pageCont
                        if (num < lengthPage - 2) {
                            $('.new_page').eq(1).children().text(`...`)
                            $('.new_page').eq(num + 1).children().text(`...`)
                            $('.new_page').slice(num + 2, lengthPage - 1).css({
                                display: 'none'
                            })
                            $('.new_page').slice(2, num - 2).css({
                                display: 'none'
                            })
                        } else if (num <= lengthPage && num > lengthPage - 2) {
                            $('.new_page').eq(1).children().text(`...`)
                            $('.new_page').slice(2, lengthPage - 3).css({
                                display: 'none'
                            })
                        } else {
                            $('.new_page').eq(1).children().text(`...`)
                            $('.new_page').slice(2, num - 2).css({
                                display: 'none'
                            })
                        }
                    }
                }
            }
            $('.new_page').eq(num - 1).toggleClass('active')
            // $('.new_page').eq(0).addClass('active')


            // $('.new_page').slice(3, lengthPage - 1).css({
            //     display: 'none'
            // })
            // $('.new_page').eq(3).after(`<li class="new_page"><a href="#">...</a></li>`)
        }

        // }
        showPage(pagingData, disPage)
        let start //每一页的起始坐标
        let checkedBoole


        function paging(num, data) { // 修改每一页显示的内容
            start = (num - 1) * 10 //每一页的起始下标为页面值减1再乘5，
            let arr = data.slice(start, start + 10)
            showTable(arr)
            $('.new_page').eq(num - 1).addClass('active')
            $('.new_page').eq(num - 1).siblings().removeClass('active')

            $('.quanxuan').click(function () { //全选按钮
                if ($(this).prop('checked') == true) {
                    $("#Tbody input").prop("checked", true)
                } else {
                    $("#Tbody input").prop("checked", false)
                }
            })
            $('#Tbody input').click(function () { //获取checked是否为选中
                console.log($("input[checkbox='false']"));
                console.log($("input[type='checkbox']"));
                if ($(this).prop('checked') == true) { //选中的时候执行这个结果
                    $('.shanchu').click(function () {
                        console.log($("input[checked='true']"));
                    })

                } else { //未选中的时候执行这个结果
                    checkedBoole = $(this).prop('checked')
                    $('.shanchu').click(function () {
                        console.log(11111)
                    })

                }
            })
            // console.log($('.table_content input').prop('checked'));
        }
        paging(1, pagingData, disPage)
        // 点击页数跳转到对应的页数
        $('.pagination').on('click', '.new_page', function () {
            ($(this).text(), pagingData)
            num = parseInt($(this).text())
            paging($(this).text(), pagingData, disPage)
        })
        // 点击上一页跳转的上一页
        $('.pagination').on('click', '.prePage', function () {
            num > 1 ? num-- && paging(num, pagingData, disPage) : paging(1, pagingData, disPage)
        })
        // 点击下一页跳转的下一页
        $('.pagination').on('click', '.nextPage', function () {
            num < lengthPage ? num++ && paging(num, pagingData, disPage) : paging(lengthPage, pagingData, disPage)
        })
        //删除数据自己这行数据
        $('.shanchu').click(function () {
            $(this).parent().parent().remove()
        })


        //按钮关闭与开启
        $('.icon-anniu_kaiqi').click(function () {
            $(this).css({ display: 'none' })
            $(this).siblings().css({ display: 'block' })
        })
        $('.icon-anniu_guanbi').click(function () {
            $(this).css({ display: 'none' })
            console.log($('this'))
            $(this).siblings().css({ display: 'block' })
        })
        // $('#Tbody').on('click', '.shanchu_table', function () { //删除
        //     if (confirm('是否确定删除？')) {
        //         let idNum = parseInt($(this).parent().siblings().eq(1).text())
        //         $(this).parent().parent().remove()
        //         console.log( $(this).parent().parent())
        //         pagingData.splice(idNum - 1, 1)
        //         paging(num, pagingData)
        //         showPage(pagingData)
        //         alert('删除成功')
        //     }
        // })
    
    </script>
</body>

</html>